<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="商户ID" prop="mchId">
                            <el-input v-model="condition.search.mchId"
                                      placeholder="商户ID"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="商户简称" prop="mchAbbr">
                            <el-input v-model="condition.search.mchAbbr"
                                      placeholder="商户简称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="接入模式" prop="mode">
                            <el-select v-model="condition.search.mode"
                                       placeholder="接入模式">
                                <el-option label="服务商模式"
                                           value="PARTNER"></el-option>
                                <el-option label="单独模式"
                                           value="SINGLE"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="showAddDialog">新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            :data="tableData"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="mchId"
                label="支付商户ID">
            </el-table-column>
            <el-table-column
                prop="mchAbbr"
                label="支付商户简称">
            </el-table-column>
            <el-table-column
                prop="keyV2"
                label="APIv2密钥">
            </el-table-column>
            <el-table-column
                prop="keyV3"
                label="APIv3密钥">
            </el-table-column>
            <el-table-column
                prop="certPath"
                label="证书本地路径">
                <template v-slot="scope">
                    <table-popover :text=scope.row.certPath :length="16"></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="mode"
                :formatter="formatMode"
                label="接入模式">
            </el-table-column>
            <el-table-column
                prop="bindMpApps"
                label="绑定公众号">
            </el-table-column>
            <el-table-column
                prop="bindMnpApps"
                label="绑定小程序">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="100px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                        <el-button @click="showUpdateDialog(scope.row)" type="text" size="small">编辑</el-button>
                        <br/>
                        <el-button @click="bind(scope.row)" type="text" size="small">新增绑定关系</el-button>
                        <br/>
                        <el-button @click="showBindMps(scope.row)" type="text" size="small">查看绑定关系
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title=addOrUpdateDialogTitle width="30%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="140px" size="small">
                <el-form-item label="接入模式">
                    <el-select v-model="addOrUpdateForm.mode"
                               placeholder="接入模式">
                        <el-option label="服务商模式"
                                   value="PARTNER"></el-option>
                        <el-option label="单独模式"
                                   value="SINGLE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="微信支付商户ID">
                    <el-input v-model="addOrUpdateForm.mchId"
                              placeholder="微信支付商户ID"></el-input>
                </el-form-item>
                <el-form-item label="微信支付商户简称">
                    <el-input v-model="addOrUpdateForm.mchAbbr"
                              placeholder="微信支付商户简称"></el-input>
                </el-form-item>
                <el-form-item label="APIv2密钥" v-if="addOrUpdateForm.mode == 'SINGLE'">
                    <el-input v-model="addOrUpdateForm.keyV2"
                              placeholder="APIv2密钥"></el-input>
                </el-form-item>
                <el-form-item label="APIv3密钥" v-if="addOrUpdateForm.mode == 'SINGLE'">
                    <el-input v-model="addOrUpdateForm.keyV3"
                              placeholder="APIv3密钥"></el-input>
                </el-form-item>
                <el-form-item label="证书本地路径" v-if="addOrUpdateForm.mode == 'SINGLE'">
                    <el-upload
                        ref="upload"
                        :action="upload()"
                        :multiple="false"
                        :limit="1"
                        :auto-upload="true"
                        accept=".p12"
                        :show-file-list="true"
                        :data="{category: 'p12', type: 'document', localFlag: true}"
                        :file-list="fileList"
                        :on-success="handleSuccess">
                        <el-button size="small" type="success">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">
                            只能上传p12格式的证书文件。
                            <br/>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="addOrUpdateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="绑定列表" width="40%" :visible.sync="bindMpsDialogVisible">
            <el-table
                size="small"
                id="mainTable"
                :data="bindMps"
                header-cell-class-name="tableHeaderStyle"
                :row-class-name="tableRowClassName">
                <el-table-column prop="accountType" label="账号类型" :formatter="formatAccountType"></el-table-column>
                <el-table-column prop="mpAppId" label="APP_ID"></el-table-column>
                <el-table-column prop="mpAppName" label="APP_NAME"></el-table-column>
                <el-table-column prop="createTime" label="绑定时间"></el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    align="center"
                    width="60px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="unbindConfirm(scope.row)" type="text" size="small">解除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="bindMpsDialogVisible = false" size="small">关闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择公众号/小程序" width="40%" :visible.sync="bindDialogVisible">
            <el-table
                size="small"
                id="mainTable"
                :data="mpInfos"
                header-cell-class-name="tableHeaderStyle"
                :row-class-name="tableRowClassName">
                <el-table-column prop="appId" label="APP_ID"></el-table-column>
                <el-table-column prop="nickName" label="昵称"></el-table-column>
                <el-table-column prop="principalName" label="主体名称"></el-table-column>
                <el-table-column prop="verifyType" label="认证类型"></el-table-column>
                <el-table-column prop="accountType" label="账号类型" :formatter="formatAccountType"></el-table-column>
                <el-table-column label="操作" fixed="right" width="50px">
                    <template v-slot="scope">
                        <div>
                            <el-button @click="bindConfirm(scope.row)" type="text" size="small">选择
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="bindDialogVisible = false" size="small">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    addWxPay,
    bindWxPay,
    deleteWxPay,
    getMpInfoByPage,
    getUploadUrl,
    getWxPayBindByPage,
    getWxPayByPage,
    unbindWxPay,
    updateWxPay
} from '@/api/api'
import {Message} from "element-ui";
import TablePopover from "@/component/single/TablePopover";

export default {
    name: "WxPay",
    components: {TablePopover},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            // 绑定的公众号和小程序
            bindMps: [],
            bindMpsDialogVisible: false,
            // 解除绑定表单
            unbindForm: {},

            // 全部的公众号和小程序列表
            mpInfos: [],
            bindDialogVisible: false,
            bindForm: {},

            // 文件列表
            fileList: [],
        }
    },
    methods: {
        upload() {
            return getUploadUrl();
        },
        // 文件上传成功后回调
        handleSuccess(response, file, fileList) {
            if (response.respCode != 1000) {
                Message.error('异常码：' + response.respCode + '，异常信息：' + response.respMsg);
                this.fileList = [];
                return;
            }
            // 得到上传成功后服务器返回的数据
            this.addOrUpdateForm.certPath = response.body.location;
            this.addOrUpdateForm.certUrl = response.body.url;
        },
        showBindMps(row) {
            this.bindMpsDialogVisible = true;
            let ss = {
                page: 1,
                rows: 10,
                total: 0,
                search: {
                    mchId: row.mchId
                }
            };
            getWxPayBindByPage(ss).then(data => {
                this.bindMps = data.body.rows;
            })
            this.unbindForm.mchId = row.mchId;
        },
        unbindConfirm(row) {
            this.unbindForm.mpAppId = row.mpAppId;
            this.$confirm('请确认是否解除绑定, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                unbindWxPay(this.unbindForm).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '解除绑定成功!'
                        });
                        this.getData();
                        this.bindMpsDialogVisible = false;
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        bind(row) {
            this.bindDialogVisible = true;
            this.getMpInfos();
            this.bindForm.mchId = row.mchId;
        },
        bindConfirm(row) {
            this.bindForm.mpAppId = row.appId;
            this.$confirm('请确认是否绑定, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                bindWxPay(this.bindForm).then(data => {
                    if (data.respCode == 1000) {
                        this.$message({
                            type: 'success',
                            message: '绑定成功!'
                        });
                        this.getData();
                        this.bindDialogVisible = false;
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatMode: function (row, column, cellValue) {
            if (cellValue == 'PARTNER') {
                return "服务商模式";
            } else if (cellValue == 'SINGLE') {
                return "单独模式";
            } else {
                return "未知";
            }
        },
        formatAccountType: function (row, column, cellValue) {
            if (cellValue == 'OFFICIAL_ACCOUNT') {
                return "公众号";
            } else if (cellValue == 'MINI_PROGRAM') {
                return "小程序";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
            this.$set(this.addOrUpdateForm, "mode", 'PARTNER')
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addWxPay(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        update: function () {
            updateWxPay(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteWxPay({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            getWxPayByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            });
        },
        // 获取公众号/小程序数据
        getMpInfos: function () {
            let ss = {
                page: 1,
                rows: 10,
                total: 0,
            };
            getMpInfoByPage(ss).then(data => {
                this.mpInfos = data.body.rows;
            });
        }
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
